/*
 * @Descripttion:
 * @Author: voanit
 * @Date: 2022-05-11 09:13:04
 * @LastEditors: voanit
 * @LastEditTime: 2022-05-11 11:04:38
 */
import React, { useState, useEffect, useRef } from 'react'
import { useTime } from './useTime'
const Time = () => {
  // const [canSend, setCanSend] = useState(true)
  // const [count, setCount] = useState(0)
  // const timerId = useRef()

  // useEffect(() => {
  //   // 销毁
  //   return () => {
  //     clearInterval(timerId.current)
  //   }
  // }, [])
  // useEffect(() => {
  //   if (count === 0) {
  //     //  清除定时器+恢复初始值
  //     setCount(5)
  //     setCanSend(true)
  //     clearInterval(timerId.current)
  //   }
  // }, [count])

  // // 定义点击事件函数
  // const send = () => {
  //   setCanSend(false)
  //   setCount(5)

  //   timerId.current = setInterval(() => {
  //     setCount((preCount) => {
  //       return preCount - 1
  //     }) // 这种写法有什么问题 //59
  //   }, 1000)
  // }

  const { count, send, canSend, countText } = useTime()

  return (
    <div>
      御剑乘风来,除魔天地间!==Time==={count}===
      <button disabled={!canSend} onClick={() => send(10)}>
        {/* {canSend ? '发送验证码' : count + '秒后发送'} */}
        {countText}
      </button>
    </div>
  )
}
export default Time
